<!-- 快捷键v3ts第二个 -->
<template>
        <!-- 快捷键elb -->
         <!-- <el-button type="primary" size="default" ></el-button> -->
         <!-- el-row是element-plus里的栅格布局(Layout分栏间隔 居中显示) -->
         <el-row class="login-container" justify="center" align="middle" >
            <el-card style="max-width:480px">
                <!-- 放一个插槽header -->
            <template #header>
                <div class="card-header">
                    <img :src="imgUrl" alt=""></img>
                </div>
            </template>
            <div class="jump-link">
                <el-link target="primary" @click="handleChang">{{ formType ? '返回登录' : '注册账号' }}</el-link>
            </div>
            <!-- 将表单实例绑定到 loginFormRef -->
             <!-- :model 绑定数据，:rules 绑定验证规则，ref 用于获取表单实例进行手动校验 -->
            <el-form 
            ref="loginFormRef" 
            :model="loginForm" 
            style="max-width: 600px"
            class="demo-ruleForm"
            :rules="rules"
            >
                <!-- 表单域 -->
                <el-form-item prop="userName">
                    <el-input v-model="loginForm.userName" placeholder="手机号" :prefix-icon="UserFilled"></el-input>
                </el-form-item>
                <el-form-item prop="passWord">
                    <el-input v-model="loginForm.passWord" type="password" placeholder="密码" :prefix-icon="Lock"></el-input>
                </el-form-item>
                <el-form-item v-if="formType" prop="validCode">
                    <el-input v-model="loginForm.validCode" placeholder="验证码" :prefix-icon="Lock">
                        <!-- 验证码插槽 -->
                        <template #append>
                        <span @click="countdownChange">{{ countdown.validText }}</span>
                        </template>
                    </el-input>                  
                </el-form-item>
                 <el-form-item>
                    <el-button type="primary" :style="{width:'100%'}" @click="submitForm(loginFormRef)">
                    {{ formType ? '注册账号' : '登录'}}
                    </el-button>
                 </el-form-item>
            </el-form>
            </el-card>
            
         </el-row>
    
</template>

<script setup lang="ts">
//引入icon图标
import { UserFilled ,Lock } from '@element-plus/icons-vue';
import { ref, reactive,computed ,toRaw} from 'vue';
import { useRouter } from 'vue-router';
import { useMenuStore } from '../../store/menu';
// import { useRoute } from 'vue-router'

//引入接口
import { getCode,userAuthentication,login,menuPermissions } from '../../api'
import { ElMessage } from 'element-plus';
// import store from '../../store';
//vite中可以以文件的形式引入静态资源
//解析登录页 Logo 图片路径（Vite 方式）
//// new URL('路径', import.meta.url)：这是利用了 JavaScript 的 URL 构造函数和 ES Module 的 import.meta.url 特性来定位文件路径。
// .href：获取该 URL 对象的完整路径字符串
const imgUrl = new URL('../../../public/login-head.png',import.meta.url).href


//表单数据,应该由后端提供
const loginForm = reactive({
    userName: '',
    passWord: '',
    validCode:'',
    
})
//创建切换表单（0登录 1注册）
const formType = ref(0)
// 点击切换注册和登录
const handleChang = () => {
    formType.value = formType.value ? 0:1
}
//账号校验规则
const validateUser = (rule, value, callback) => {
    //不能为空，为空时，调用 callback 传递错误信息
    if (value === '') {
        callback(new Error('请输入账号'))
    } else {
        const phoneReg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
        //格式正确：调用 callback() 不传递错误，格式错误：传递错误信息
        phoneReg.test(value) ? callback() :callback(new Error('手机号格式不对，请输入正确手机号'))
    }
}
//密码校验
const validatePass = (rule, value, callback) => {
    //不能为空，为空时，调用 callback 传递错误信息
    if (value === '') {
        callback(new Error('请输入密码'))
    } else {
        const reg = /^[a-zA-Z0-9_-]{4,16}$/
        reg.test(value) ? callback() :callback(new Error('密码格式不对,需要4到16字符,请确认格式'))
    }
}
//表单校验
//用户输入手机号并离开输入框（失去焦点）时，会自动触发 validateUser 校验
const rules = reactive({
    userName: [{ validator: validateUser, trigger: 'blur' }],
    passWord:[{ validator: validatePass, trigger: 'blur' }]
})
//发送短信
const countdown = reactive({
    validText: '获取验证码',
    time:60
})
//记录定时器状态，防止被多次点击
let flag = false
const countdownChange = () => {
    if (flag) return
    //判断手机号是否正确
    // // 手机号正则
    const phoneReg =/^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
    if (!loginForm.userName || !phoneReg.test(loginForm.userName)) {
    //element里面的message提示错误组件
       return ElMessage({
       message: '请检查手机号是否正确',
       type: 'warning',
  })
    }
    //倒计时
    const time = setInterval(() => {
        if (countdown.time<=0) {
            countdown.time = 60
            countdown.validText = `获取验证码`  
            flag = false
            //定时器清除
            clearInterval(time)
        } else {
        countdown.time -= 1
        countdown.validText =`剩余${countdown.time}s`
        }
        
    }, 1000)
    flag = true
    //调接口，接口那边指定要tel类型
    //then 是 Promise 语法，处理异步结果
    getCode({ tel: loginForm.userName }).then(({ data }) => {
        if (data.code === 10000) {
             console.log('准备显示发送成功'); 
            ElMessage.success('发送成功')
        }
    })
}

const router = useRouter()
const menuStore = useMenuStore()
// const route =useRoute()

const routerList = computed(() => menuStore.routerList)
//通过 ref 引用表单组件，从而调用表单的内置方法（如校验、重置）
//把 <el-form> 组件的实例赋值给 loginFormRef.value 
const loginFormRef = ref()
//表单提交
const submitForm = async (formEl) => {
    if (!formEl) return
    //手动触发表单校验
    await formEl.validate((valid, fields) => {
    if (valid) {
        // console.log(loginForm, 'submit!')
        //注册页面
        if (formType.value) {
            userAuthentication(loginForm).then(({data}) => {
            if (data.code === 10000) {
                ElMessage.success('注册成功，请登录')
                formType.value = 0
               }    
            })
        }
        //登录页面
        else {
            login(loginForm).then(({ data }) => {
             if (data.code === 10000) {
                 ElMessage.success('登录成功！')
                //  console.log(data)np
                 //用户输入且后端验证通过后，将token和用户信息缓存到浏览器
                 localStorage.setItem('pz_token', data.data.token)
                 localStorage.setItem('pz_userInfo', JSON.stringify(data.data.userInfo))
                 //动态路由
                 menuPermissions().then(({ data }) => {
                    // console.log(data.data)
                     menuStore.dynamicMenu(data.data)
                     //响应式数据转为普通数据
                    toRaw(routerList.value).forEach(item => {
                    //动态路由添加
                    router.addRoute('main', item)    
                    });
                      router.push('/')
                    
                 })
                 
               }         
                })
        }
    } else {
      console.log('error submit!', fields)
    }
  })
}

</script>

<style lang="less" scoped>
:deep(.el-card__header) {
    padding: 0
  }
  .login-container {
    height: 100%;
    .card-header{
      background-color: #899fe1;
      img {
        width: 430px;
      }
    }
    .jump-link {
      text-align: right;
      margin-bottom: 10px;
    }
  }
</style>